<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>

    <ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()">
      <ion-segment-button value="all">
        All
      </ion-segment-button>
      <ion-segment-button value="favorites">
        Favorites
      </ion-segment-button>
    </ion-segment>

    <ion-buttons slot="end">
      <ion-button (click)="presentFilter()">
        <ion-icon slot="icon-only" name="options"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>

  <ion-toolbar color="primary">
    <ion-searchbar [(ngModel)]="queryText" (ionChange)="updateSchedule()" placeholder="Search">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list #scheduleList [hidden]="shownSessions === 0">
    <ion-item-group *ngFor="let group of groups" [hidden]="group.hide">
      <ion-item-divider sticky>
        <ion-label>
          {{group.time}}
        </ion-label>
      </ion-item-divider>

      <ion-item-sliding *ngFor="let session of group.sessions" #slidingItem [attr.track]="session.tracks[0] | lowercase" [hidden]="session.hide">
        <ion-item button (click)="goToSessionDetail(session)">
          <ion-label>
            <h3>{{session.name}}</h3>
            <p>
              {{session.timeStart}} &mdash; {{session.timeEnd}}: {{session.location}}
            </p>
          </ion-label>
        </ion-item>
        <ion-item-options>
          <ion-item-option color="favorite" (click)="addFavorite(slidingItem, session)" *ngIf="segment === 'all'">
            Favorite
          </ion-item-option>
          <ion-item-option color="danger" (click)="removeFavorite(slidingItem, session, 'Remove Favorite')" *ngIf="segment === 'favorites'">
            Remove
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-item-group>
  </ion-list>

  <ion-list-header [hidden]="shownSessions > 0">
    No Sessions Found
  </ion-list-header>

  <ion-fab slot="fixed" vertical="bottom" horizontal="end" #fab>
    <ion-fab-button #fabButton (click)="toggleList(fabButton, fabList)"><ion-icon name="share"></ion-icon></ion-fab-button>
    <ion-fab-list #fabList side="top">
      <ion-fab-button color="vimeo" (click)="openSocial('Vimeo', fab)">
        <ion-icon name="logo-vimeo"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="google" (click)="openSocial('Google+', fab)">
        <ion-icon name="logo-googleplus"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="twitter" (click)="openSocial('Twitter', fab)">
        <ion-icon name="logo-twitter"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="facebook" (click)="openSocial('Facebook', fab)">
        <ion-icon name="logo-facebook"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>
</ion-content>
